<template>
  <view>
    <u-cell-group>
      <u-cell title="头像" @click="changeHead">
        <u-image width="100rpx" height="100rpx" slot="right-icon" :src="headImg" shape="circle"></u-image>
      </u-cell>
      <u-cell title="昵称" value="未来可期" :isLink="true"></u-cell>
      <u-cell title="性别" :value="sex" @click="selectSex" :isLink="true"></u-cell>
      <u-cell title="出生日期" :value="birthday" @click="show = true" :isLink="true"></u-cell>
      <u-cell title="常居地" :value="address" @click="showAddr = true" :isLink="true"></u-cell>
      <u-cell title="服务区域" value="香洲区" :isLink="true"> </u-cell>
      <u-cell title="服务品类" value="定制家具，家居类" :isLink="true"></u-cell>
      <u-cell title="服务类型" value="安装，配送" :isLink="true"></u-cell>
      <u-cell title="专业证书认证" value="请上传你的证书" :isLink="true"></u-cell>
      <u-cell title="账号安全" value="158****0265" :isLink="true"></u-cell>
    </u-cell-group>
    <u-calendar v-model="show" @change="change"></u-calendar>
    <u-picker mode="region" v-model="showAddr" :area-code="['21', '2101', '210103']" @confirm="selectAddr"></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        headImg: '/static/touxiang.jpg',
        sex: '男',
        birthday: '2021-02-23',
        show: false,
        address: '辽宁省-沈阳市-沈河区',
        showAddr: false,
      }
    },
    methods: {
      changeHead() {
        uni.chooseImage({
          count: 1,
          success: res => {
            this.headImg = res.tempFilePaths[0]
          },
        })
      },
      selectSex() {
        const arr = ['男', '女', '保密']
        uni.showActionSheet({
          itemList: arr,
          success: res => {
            this.sex = arr[res.tapIndex]
          },
          fail: function (res) {
            console.log(res.errMsg)
          },
        })
      },
      change(e) {
        this.birthday = e.result
      },
      selectAddr(e) {
        console.log(e)
        this.address = `${e.province.label}-${e.city.label}-${e.area.label}`
      },
    },
  }
</script>

<style></style>
